// 设置导航组件
// 提供设置分类的导航界面

import React from 'react';
import {
  FileText,
  Palette,
  Keyboard,
  FolderOpen,
  Puzzle,
  Settings,
  ChevronRight
} from 'lucide-react';
import { SettingsCategory } from '../../types/settings';

interface SettingsNavigationProps {
  activeCategory: SettingsCategory;
  onCategoryChange: (category: SettingsCategory) => void;
}

// 设置分类配置
const categoryConfig = [
  {
    id: SettingsCategory.Editor,
    name: '编辑器',
    description: '代码编辑器相关设置',
    icon: FileText,
    items: [
      { id: 'basic', name: '基础设置', description: '字体、缩进、换行等' },
      { id: 'editing', name: '编辑行为', description: '自动保存、格式化等' },
      { id: 'suggestions', name: '代码提示', description: '智能提示和补全' },
      { id: 'folding', name: '代码折叠', description: '代码折叠相关设置' },
      { id: 'cursor', name: '光标和选择', description: '光标样式和行为' },
      { id: 'scrolling', name: '滚动', description: '滚动行为设置' }
    ]
  },
  {
    id: SettingsCategory.Appearance,
    name: '外观',
    description: '界面外观和主题设置',
    icon: Palette,
    items: [
      { id: 'theme', name: '主题', description: '颜色主题和跟随系统' },
      { id: 'colors', name: '颜色', description: '自定义颜色配置' },
      { id: 'layout', name: '布局', description: '界面布局和面板位置' },
      { id: 'fonts', name: '字体', description: '界面字体设置' },
      { id: 'icons', name: '图标', description: '文件和文件夹图标' },
      { id: 'animations', name: '动画', description: '界面动画效果' }
    ]
  },
  {
    id: SettingsCategory.Keyboard,
    name: '快捷键',
    description: '键盘快捷键设置',
    icon: Keyboard,
    items: [
      { id: 'shortcuts', name: '快捷键映射', description: '查看和修改快捷键' },
      { id: 'conflicts', name: '冲突检测', description: '快捷键冲突处理' },
      { id: 'global', name: '全局快捷键', description: '系统级快捷键设置' }
    ]
  },
  {
    id: SettingsCategory.Files,
    name: '文件',
    description: '文件处理相关设置',
    icon: FolderOpen,
    items: [
      { id: 'associations', name: '文件关联', description: '文件类型关联设置' },
      { id: 'encoding', name: '编码', description: '文件编码设置' },
      { id: 'watching', name: '文件监听', description: '文件变化监听设置' },
      { id: 'backup', name: '备份', description: '文件备份设置' }
    ]
  },
  {
    id: SettingsCategory.Extensions,
    name: '扩展',
    description: '扩展管理设置',
    icon: Puzzle,
    items: [
      { id: 'management', name: '扩展管理', description: '启用/禁用扩展' },
      { id: 'updates', name: '自动更新', description: '扩展更新设置' }
    ]
  },
  {
    id: SettingsCategory.Advanced,
    name: '高级',
    description: '高级设置和实验性功能',
    icon: Settings,
    items: [
      { id: 'performance', name: '性能', description: '内存和GPU设置' },
      { id: 'debugging', name: '调试', description: '调试模式和日志' },
      { id: 'network', name: '网络', description: '代理和网络设置' },
      { id: 'experimental', name: '实验性功能', description: '测试中的新功能' }
    ]
  }
];

export const SettingsNavigation: React.FC<SettingsNavigationProps> = ({
  activeCategory,
  onCategoryChange
}) => {
  return (
    <nav className="p-4 space-y-2">
      {categoryConfig.map((category) => {
        const Icon = category.icon;
        const isActive = activeCategory === category.id;
        
        return (
          <div key={category.id} className="space-y-1">
            {/* 分类标题 */}
            <button
              onClick={() => onCategoryChange(category.id)}
              className={`
                w-full flex items-center justify-between p-3 rounded-lg text-left transition-colors
                ${isActive
                  ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-900 dark:text-blue-100'
                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                }
              `}
            >
              <div className="flex items-center space-x-3">
                <Icon className="w-5 h-5" />
                <div>
                  <div className="font-medium">{category.name}</div>
                  <div className="text-xs text-gray-500 dark:text-gray-400">
                    {category.description}
                  </div>
                </div>
              </div>
              <ChevronRight 
                className={`w-4 h-4 transition-transform ${
                  isActive ? 'rotate-90' : ''
                }`} 
              />
            </button>
            
            {/* 子项目 */}
            {isActive && (
              <div className="ml-8 space-y-1">
                {category.items.map((item) => (
                  <button
                    key={item.id}
                    className="w-full text-left p-2 rounded text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-200"
                  >
                    <div className="font-medium">{item.name}</div>
                    <div className="text-xs text-gray-500 dark:text-gray-500">
                      {item.description}
                    </div>
                  </button>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </nav>
  );
};
